<template>
  <view class="template-news tn-safe-area-inset-bottom">
    
    <view class="tn-navbg" :style="{height: vuex_custom_bar_height + 'px'}">
      <!-- 顶部自定义导航 -->
      <tn-nav-bar fixed alpha customBack>
        <view slot="back" class='tn-custom-nav-bar__back'
          @click="goBack">
          <text class='icon tn-icon-left'></text>
          <text class='icon tn-icon-home-capsule-fill'></text>
        </view>
				<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
					<text class="tn-text-bold tn-text-xl tn-color-black">试题详情</text>
				</view>
      </tn-nav-bar>
    </view>
    <!-- 内容区域开始 -->
    <view class="tn-margin-top-xs" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <view class="nav_title--wrap">
        <view class="nav_title tn-main-gradient-blue">
            {{examContent.title || ""}}
        </view>
      </view>
      
      <view class="news-img" style="padding: 10rpx;">
        <mp-html :content="examContent.content" />
      </view>
      
    </view>
		<!-- 内容区域结束 -->
		
		<!-- 悬浮按钮开始-->
		<!-- <view class="tn-flex tn-flex-row-between tn-footerfixed">
		  <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
		    <tn-button backgroundColor="tn-main-gradient-aquablue" padding="40rpx 0" width="90%" :fontSize="28">
		      <text class="tn-color-white">上一题</text>
		      <text class="tn-padding-left-xs tn-color-white"></text>
		    </tn-button>
		  </view>
		  <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
		    <tn-button backgroundColor="#tn-main-gradient-cyan" padding="40rpx 0" width="90%" :fontSize="28">
		      <text class="tn-color-white">下一题</text>
		      <text class="tn-padding-left-xs tn-color-white"></text>
		    </tn-button>
		  </view>
		</view> -->
		<!-- 悬浮按钮结束 -->
    
    <view class="tn-margin-top tn-padding-top-sm tn-margin-bottom">
      <view class="see">
        <view class="justify-content-item tn-flex tn-flex-col-center">
          <view style="margin-left: 15rpx;margin-right: 6rpx;transform: scale(0.85);">
            <tn-avatar-group :lists="groupAvatarList" size="sm"></tn-avatar-group>
          </view>
          <text class="tn-color-gray">{{groupList.count || 0}}人</text>
        </view>
        <view class="justify-content-item tn-color-gray tn-text-center tn-margin-right" style="padding-top: 5rpx;">
          <text class="tn-icon-write tn-text-lg"  :style="groupList.is_submit ? 'padding-right: 5rpx;color: red;': ''"></text>
          <text class="tn-padding-right tn-text-df">{{groupList.submit || 0}}</text>
          <text class="tn-icon-like-lack tn-text-lg" @click="submitCollection" :style="groupList.is_collection ? 'padding-right: 5rpx;color: red;': ''"></text>
          <text class="tn-text-df" @click="submitCollection">{{groupList.collect || 0}}</text>
        </view>
        
      </view>
    </view>
    
    <!-- 边距间隔 -->
    <view class="tn-strip-bottom"></view>
    
    <view class="tn-flex tn-flex-row-between tn-padding-top-sm">
      <view class="justify-content-item tn-margin tn-text-bold tn-text-xl">
      相关推荐
      </view>
      <view class="justify-content-item tn-margin tn-text-lg tn-color-grey" @click="tn('/homePages/hot')">
        <text class="tn-padding-xs">全部</text>
        <text class="tn-icon-topics"></text>
      </view>
    </view>
    
    
    <!-- 不建议写时间，因为写了时间，你就要经常更新文章了鸭-->
    <view class="">
      <view class="tn-margin-bottom-lg">
        <block v-for="(item, index) in relExamContent" :key="index">
          <view class="article-shadow tn-margin" @click="tn('/subpages/exam/collection/detail?uid='+ item.uid +'')">
            <view class="tn-flex">
              
              <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
                <view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
                  <text class="">{{ item.title }}</text>
                </view>
                <view class="tn-padding-top-xs" style="min-height: 90rpx;">
                  <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
                    <!-- {{ item.remark }} -->
                  </text>
                </view>
                <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
                  <view 
                    class="justify-content-item tn-tag-content__item tn-margin-right tn-text-sm tn-text-bold">
                    <text class="tn-tag-content__item--prefix">#</text> {{ item.category.title }}
                  </view>
                  <view class="justify-content-item tn-color-gray tn-text-center" style="padding-top: 5rpx;">
                    <text class="tn-icon-rocket tn-text-lg" style="padding-right: 5rpx;"></text>
                    <text class="tn-padding-right tn-text-df">{{ item.submit }}</text>
                    <text class="tn-icon-like-lack tn-text-lg" style="padding-right: 5rpx;"></text>
                    <text class="tn-text-df">{{ item.collect }}</text>
                  </view>
                </view>
              </view>
              <view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.url + item.path + ')'">
                <view class="image-article">
                </view>
              </view>
            </view>
          </view>
        </block>
        
      </view>
      
    </view> 
    
    <view class='tn-tabbar-height'></view>
    
		<!-- 回到首页悬浮按钮-->
		<block v-if="showNav">
			<nav-index-button></nav-index-button>
		</block>
		
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import { getReadingContent, getReadingRelList, getReadingGroupList, submitReadingCollection } from "@/utils/api/exam.js"
	import NavIndexButton from '@/libs/components/nav-index-button.vue'
  export default {
    name: 'TemplateNews',
    mixins: [template_page_mixin],
		components: {
			NavIndexButton
		},
    data(){
      return {
				showNav: false,
        groupList: [],
				groupAvatarList:[],
        relExamContent: [],// 相关试卷
				searchWhere: {// 试题查询条件
					uid: "",
				},
				examContent: {},// 试题内容
      }
    },
		onLoad(params) {
			this.searchWhere.uid = params.uid || ""
			// this.getReadingRelList()
			// this.getReadingGroupList()
			this.$t.mpShare = {
				share: false,
			}
			if (!this.$t.mpShare.share) {
				uni.hideShareMenu()
			}
		},
		onShow() {
			this.getExamContent()
		},
    methods: {
			// 获取问答试题内容
			getExamContent() {
				uni.showLoading({
					title: "努力加载中",
					icon: "none"
				})
				getReadingContent(this.searchWhere).then(res => {
					uni.hideLoading()
					if (res.code == 100) {
						this.examContent = res.data
						return
					}
					this.$func.showToast(res.msg)
				})
			},
			// 查询试卷答题记录
			getReadingGroupList() {
				getReadingGroupList({uid: this.searchWhere.uid}).then(res => {
					if (res.code == 100) {
						this.groupList = res.data
						for(var i = 0; i < res.data.list.length; i++) {
							this.groupAvatarList[i] = {
								src: res.data.list[i].user.avatar_url
							}
						}
						return
					}
					this.$func.showTotast(res.msg)
				})
			},
			// 试卷收藏操作
			submitCollection() {
				if (this.groupList.is_collection) {
					this.$func.showToast("你已收藏")
					return
				}
				submitReadingCollection({uid:this.searchWhere.uid}).then(res => {
					if (res.code == 100) {
						this.groupList.is_collection = true
						this.groupList.collect = this.groupList.collect + 1
						this.examContent.collect = this.examContent.collect + 1
					}
					this.$func.showToast(res.msg)
				})
			},
			// 获取相关试卷
			getReadingRelList() {
				getReadingRelList({uid: this.searchWhere.uid}).then(res => {
					this.relExamContent = res.data
				})
			},
      // 跳转
      tn(e) {
        uni.navigateTo({
          url: e,
        });
      },
    },
		onPageScroll(e) {
			let screenHeight = 500
			let sysInfo = uni.getSystemInfo({
				success(res) {
					screenHeight = res.screenHeight || 500
				}
			})
			if (e.scrollTop * 4 > screenHeight) {
				this.showNav = true
			} else {
				this.showNav = false
			}
		}
  }
</script>

<style lang="scss" scoped>

  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }
  
  /* 顶部渐变*/
  .tn-navbg {
      background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
      /* background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b); */
      /* background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423); */
      /* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
      background-size: 500% 500%; 
      animation: gradientBG 15s ease infinite; 
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 100;
  } 
   
  @keyframes gradientBG { 
      0% { 
          background-position: 0% 50%; 
      } 
      50% { 
          background-position: 100% 50%; 
      } 
      100% { 
          background-position: 0% 50%; 
      } 
  }
  
  /* 标题 start */
  .nav_title {
    -webkit-background-clip: text;
    color: transparent;
		padding-left: 10rpx;
		padding-right: 10rpx;
		// text-align: center;
    
    &--wrap {
      position: relative;
      display: flex;
      height: atuo;
			margin-top: 20rpx;
      font-size: 30rpx;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title00.png);
      background-size: cover;
    }
  }
  /* 标题 end */
  
  /* 资讯主图 start*/
  .image-article {
    border-radius: 8rpx;
    width: 200rpx;
    height: 200rpx;
    position: relative;
  }
  
  .image-pic{
    border: 1rpx solid #F8F7F8;
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 10rpx;
  }
  
  .article-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  /* 文字截取*/
  .clamp-text-1 {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .clamp-text-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  /* 标签内容 start*/
  .tn-tag-content {
    &__item {
      display: inline-block;
      line-height: 35rpx;
      color: #1D2541;
      background-color: #F3F2F7;
      border-radius: 10rpx;
      font-size: 22rpx;
      padding: 5rpx 15rpx;
  
      &--prefix {
        padding-right: 10rpx;
      }
    }
  }
  
  
  /* 大单图 start*/
  .tn-blogger-content2 {
    &__wrap {
      padding: 30rpx;
    }
    
    &__info {
      &__btn {
        margin-right: -12rpx;
        opacity: 0.5;
      }
    }
    
    &__label {
      &__item {
        line-height: 45rpx;
        padding: 0 20rpx;
        margin: 5rpx 18rpx 0 0;
        
        &--prefix {
          color: #00FFC8;
          padding-right: 10rpx;
        }
      }
      
      &__desc {
        line-height: 55rpx;
      }
    }
    
    &__main-image {
      box-shadow: 0rpx 5rpx 40rpx 0rpx rgba(43, 158, 246, 0.2);
      border-radius: 16rpx;
      
      &--1 {
        max-width: 690rpx;
        min-width: 690rpx;
        max-height: 400rpx;
        min-height: 400rpx;
      }
      
      &--2 {
        max-width: 260rpx;
        max-height: 260rpx;
      }
      
      &--3 {
        height: 212rpx;
        width: 100%;
      }
    }
    
    &__count-icon {
      font-size: 40rpx;
      padding-right: 5rpx;
    }
  }
  
  .image-design{
    padding: 160rpx 0rpx;
    font-size: 40rpx;
    font-weight: 300;
    position: relative;
  }
  .image-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 10rpx;
  }
  /* 文章内容 end*/
  
  /* 底部悬浮按钮 start*/
  .tn-tabbar-height {
  	min-height: 100rpx;
  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  }
  .tn-footerfixed {
    // position: fixed;
    width: 100%;
    bottom: calc(30rpx + env(safe-area-inset-bottom));
    // z-index: 1024;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
    
  }
  /* 底部悬浮按钮 end*/
  
  /* 查看*/
  .see {
    display: flex;
    justify-content: space-between;
    padding-top: 10rpx;
    border-radius: 6rpx;
    color: #666;
    line-height: 1.6;
  }
  /* 间隔线 start*/
  .tn-strip-bottom {
   width: 100%;
   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
  }
   /* 间隔线 end*/
</style>
